<template>
  <div>
      <input ref="myInp" type="text"  placeholder="这是一个输入框" v-if="isShow">
      <button v-else @click="btn">点击搜索</button>
  </div>
</template>

<script>
export default {
    data () {
        return {
            isShow:false
        }
    },
    methods: {
        async btn(){
            this.isShow = true;
           
            // 原因：data变化更新DOM是异步的
            // 没挂载到真实的dom上
            // this.$nextTick(()=>{
            //      this.$refs.myInp.focus()
            // })
            await this.$nextTick()
            this.$refs.myInp.focus()
        }
    }
}
</script>

<style>

</style>